<template>
<div class="all" @click="jump">
  <div class="title-left">知</div>
  <div class="title-right">晓</div>
  <div class="name-left">你 <br> 要<br>悄<br>悄<br>拔<br>尖</div>
  <div class="name-rigth">然 <br> 后<br>惊<br>艳<br>所<br>有 <br>人</div>
  <div class="autho">废柴兄弟</div>
</div>
</template>

<script>
export default {
name: "bot",
  methods:{
  jump(){
    this.$router.push("/login")
  }
  }
}
</script>

<style scoped lang="less">
.all {
  height: 100vh;
  background-color: #67c8d5;
}
.title-left,{
  font-size: 50px;
  color: #869e44;
  position: absolute;
  left: 45%;
  top: 20%;
  animation-name: titlelft;
  animation-duration: 4s;
}
@keyframes titlelft {
  0% {left: -50%}
  10% {left:5%;opacity: 0.1}
  50% {left:55%;opacity: 0.6}
  100% {left:45%;opacity: 1}
}
.title-right {
  font-size: 50px;
  color: #c13f1e;
  position: absolute;
  right: 45%;
  top: 30%;
  animation-name: titleright;
  animation-duration: 4s;
}
@keyframes titleright {
  0% {right: -50%}
  10% {right:5%;opacity: 0.1}
  50% {right:55%;opacity: 0.6}
  100% {right:45%;opacity: 1}
}
.autho {
  font-size: 18px;
  color: #2c3e50;
}
.name-left,.name-rigth{
  font-size: 17px;
  color: #ea0db4;
  position: absolute;
}
.name-rigth {
  right: 20%;
  top: 45%;
  color: #0e10e2;
  animation-name: nameright;
  animation-duration: 5s;
}
@keyframes nameright {
  0% {top:-40%}
  10% {top:5%;opacity: 0.1}
  50% {top:55%;opacity: 0.6}
  100% {top:45%;opacity: 1}
}

.name-left {
  left: 20%;
  bottom: 25%;
  animation-name: nameleft;
  animation-duration: 5s;
}
@keyframes nameleft {
  0% {bottom:-40%}
  10% {bottom:5%;opacity: 0.1}
  50% {bottom:55%;opacity: 0.6}
  100% {bottom:25%;opacity: 1}
}

.autho {
  position: absolute;
  bottom: 5%;
  left: 35%;
  color: #5d7f97;
}
</style>